<style scoped>
    .main {
        margin: 10px 100px;
    }

    .scenery-img img {
        width: 100%;
    }
</style>

<template>
    <div id="scenery" class="main">
        <HeadTitle></HeadTitle>
        <Row :gutter="32" style="text-align:center;">
            <i-col span="2">
                <Button size="large" type="primary" icon="chevron-left" long @click="toHome"></Button>
            </i-col>
        </Row>
        <Carousel v-model="index" :height="850">
            <CarouselItem v-for="s in list" :key="s.id">
                <div class="scenery-img">
                    <img :src="s.imagePath + s.image">
                </div>
            </CarouselItem>
        </Carousel>
    </div>
</template>

<script>
    import Axios from "../axios";
    import HeadTitle from "./component/HeadTitle.vue";

    export default {
        components: {HeadTitle},
        name: "scenery",
        data() {
            return {
                list: [],
                index: 0
            }
        },
        created() {
            Axios.get("/scenery/all").then((response) => {
                if (response.status === 200) {
                    this.list = response.data.content;
                }
            })
        },
        methods: {
            toHome() {
                this.$router.push("/");
            }
        }
    }
</script>
